<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关注提示提示关注提示关注提示框自定义工具</title>
    <script src="../css/tailwind3.4.17.css"></script>
    <link href="../css/all.min.css" rel="stylesheet">
    <script src="../js/html2canvas.min.js"></script>
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FFDC5E',
                        secondary: '#0066CC',
                        dark: '#1f2937',
                        light: '#f3f4f6'
                    },
                    fontFamily: {
                        sans: ['Arial', 'sans-serif'],
                    },
                    boxShadow: {
                        'custom': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .shadow-custom {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .rounded-full-custom {
                border-radius: 9999px;
            }
            .alert-box {
                border-radius: 9999px;
                padding: 12px 24px;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                cursor: grab;
                transition: all 0.2s ease;
            }
            .alert-box:active {
                cursor: grabbing;
            }
            .alert-box:hover {
                transform: scale(1.02);
            }
            .color-preview {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                display: inline-block;
                margin-left: 6px;
                border: 1px solid #ddd;
            }
            .slider-container {
                display: flex;
                align-items: center;
            }
            .slider-container input[type="range"] {
                flex-grow: 1;
                margin-right: 8px;
            }
            .slider-value {
                width: 35px;
                text-align: right;
            }
            .icon-option {
                cursor: pointer;
                padding: 6px;
                border-radius: 6px;
                transition: all 0.2s ease;
            }
            .icon-option:hover {
                background-color: #f0f0f0;
            }
            .icon-option.selected {
                background-color: #e0e7ff;
                border: 2px solid #3b82f6;
            }
            .preset-option {
                cursor: pointer;
                padding: 4px 8px;
                border-radius: 6px;
                transition: all 0.2s ease;
                border: 1px solid #ddd;
            }
            .preset-option:hover {
                border-color: #999;
                transform: translateY(-1px);
            }
            .preset-option.selected {
                border-color: #3b82f6;
                background-color: #f0f9ff;
            }
            .loading-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 1000;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease;
            }
            .loading-overlay.active {
                opacity: 1;
                visibility: visible;
            }
            .loading-spinner {
                width: 50px;
                height: 50px;
                border: 5px solid rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                border-top-color: #fff;
                animation: spin 1s ease-in-out infinite;
            }
            @keyframes spin {
                to { transform: rotate(360deg); }
            }
            .notification {
                position: fixed;
                bottom: 20px;
                right: 20px;
                padding: 10px 20px;
                border-radius: 8px;
                background-color: #fff;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                transform: translateY(100px);
                opacity: 0;
                transition: all 0.3s ease;
                z-index: 1000;
                display: flex;
                align-items: center;
            }
            .notification.show {
                transform: translateY(0);
                opacity: 1;
            }
            .notification.success {
                border-left: 4px solid #10b981;
            }
            .notification.error {
                border-left: 4px solid #ef4444;
            }
            .notification-icon {
                margin-right: 8px;
                font-size: 18px;
            }
            .notification.success .notification-icon {
                color: #10b981;
            }
            .notification.error .notification-icon {
                color: #ef4444;
            }
            .action-btn {
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                cursor: pointer;
                transition: all 0.3s ease;
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }
            .action-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            }
            .action-btn:active {
                transform: translateY(0);
            }
        }
    </style>
</head>
<body style="background-color: #f3f4f6; min-height: 100vh; font-family: 'Arial', sans-serif;">
    <!-- 主要内容区 -->
    <main style="max-width: 1200px; margin: 0 auto; padding: 1.5rem;">
        <div style="display: flex; flex-direction: row; gap: 1.5rem; @media (min-width: 1024px) { flex-direction: row; }">
            <!-- 左侧控制面板 -->
            <div style="width: 100%; @media (min-width: 1024px) { width: 33.333%; } background-color: #ffffff; padding: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
                <h2 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; text-align: center;">样式设置</h2>
                
                <!-- 预设样式 -->
                <div style="margin-bottom: 1rem;">
                    <h3 style="font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.5rem;">预设样式</h3>
                    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                        <div class="preset-option selected" data-preset="default" style="cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: all 0.2s ease; border: 1px solid #ddd; font-size: 0.75rem;">默认</div>
                        <div class="preset-option" data-preset="blue" style="cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: all 0.2s ease; border: 1px solid #ddd; font-size: 0.75rem;">蓝色系</div>
                        <div class="preset-option" data-preset="green" style="cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: all 0.2s ease; border: 1px solid #ddd; font-size: 0.75rem;">绿色系</div>
                        <div class="preset-option" data-preset="pink" style="cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: all 0.2s ease; border: 1px solid #ddd; font-size: 0.75rem;">粉色系</div>
                        <div class="preset-option" data-preset="dark" style="cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.375rem; transition: all 0.2s ease; border: 1px solid #ddd; font-size: 0.75rem;">深色系</div>
                    </div>
                </div>
                
                <!-- 颜色设置 -->
                <div style="margin-bottom: 1rem;">
                    <h3 style="font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.5rem;">颜色设置</h3>
                    <div style="display: flex; gap: 0.5rem;">
                        <!-- 背景颜色 -->
                        <div style="flex: 1;">
                            <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">背景颜色</label>
                            <div style="display: flex; align-items: center;">
                                <input type="color" id="bgColor" style="width: 100%; height: 2rem; cursor: pointer;" value="#FFDC5E">
                                <span class="color-preview" style="margin-left: 0.5rem; background-color: #FFDC5E;"></span>
                            </div>
                        </div>
                        
                        <!-- 文字颜色 -->
                        <div style="flex: 1;">
                            <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">文字颜色</label>
                            <div style="display: flex; align-items: center;">
                                <input type="color" id="textColor" style="width: 100%; height: 2rem; cursor: pointer;" value="#1f2937">
                                <span class="color-preview" style="margin-left: 0.5rem; background-color: #1f2937;"></span>
                            </div>
                        </div>
                        
                        <!-- 链接颜色 -->
                        <div style="flex: 1;">
                            <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">链接颜色</label>
                            <div style="display: flex; align-items: center;">
                                <input type="color" id="linkColor" style="width: 100%; height: 2rem; cursor: pointer;" value="#0066CC">
                                <span class="color-preview" style="margin-left: 0.5rem; background-color: #0066CC;"></span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 提示框大小 -->
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">提示框大小</label>
                    <div class="slider-container">
                        <input type="range" id="sizeSlider" min="80" max="120" value="100" style="flex-grow: 1; margin-right: 0.5rem; height: 1rem;">
                        <span class="slider-value" id="sizeValue" style="width: 2.1875rem; text-align: right; font-size: 0.75rem;">100%</span>
                    </div>
                </div>
                
                <!-- 圆角大小 -->
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">圆角大小</label>
                    <div class="slider-container">
                        <input type="range" id="radiusSlider" min="0" max="50" value="50" style="flex-grow: 1; margin-right: 0.5rem; height: 1rem;">
                        <span class="slider-value" id="radiusValue" style="width: 2.1875rem; text-align: right; font-size: 0.75rem;">50%</span>
                    </div>
                </div>
                
                <!-- 阴影效果 -->
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">阴影效果</label>
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <span style="font-size: 0.75rem; color: #6b7280;">无</span>
                        <label style="relative; display: inline-flex; align-items: center; cursor: pointer;">
                            <input type="checkbox" id="shadowToggle" style="sr-only; peer" checked>
                            <div style="width: 2.5rem; height: 1.25rem; background-color: #e5e7eb; peer-focus: outline-none; peer-focus: ring-4; peer-focus: ring-blue-300; border-radius: 9999px; peer; peer-checked:after: translate-x-full; peer-checked:after: border-white; after: content-['']; after: position-absolute; after: top-[2px]; after: left-[2px]; after: background-color: #ffffff; after: border-gray-300; after: border; after: rounded-full; after: height: 1rem; after: width: 1rem; after: transition-all; peer-checked: background-color: #2563eb;"></div>
                        </label>
                        <span style="font-size: 0.75rem; color: #6b7280;">有</span>
                    </div>
                </div>
                
                <!-- 图标选择 -->
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">选择图标</label>
                    <div style="display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.25rem;">
                        <div class="icon-option selected" data-icon="leaf" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-leaf" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="star" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-star" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="heart" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-heart" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="bell" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-bell" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="gift" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-gift" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="thumbs-up" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa fa-thumbs-up" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="arrow-up" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-arrow-up" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="arrow-up-circle" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-arrow-circle-up" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="arrow-up-square" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-arrow-square-o-up" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="chevron-up" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-chevron-up" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="caret-up" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-caret-up" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                        <div class="icon-option" data-icon="angle-up" style="cursor: pointer; padding: 0.375rem; border-radius: 0.375rem; transition: all 0.2s ease;">
                            <i class="fa fa-angle-up" style="text-align: center; display: block; font-size: 1.125rem;"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 提示文本 -->
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">提示文本</label>
                    <textarea id="alertText" style="width: 100%; padding: 0.25rem; border: 1px solid #d1d5db; border-radius: 0.375rem; focus: outline-none; focus: ring-2; focus: ring-blue-500; font-size: 0.875rem; resize: vertical;" rows="2">点击上方蓝字关注我们</textarea>
                </div>
                
                <!-- 链接文本 -->
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">链接文本</label>
                    <input type="text" id="linkText" style="width: 100%; padding: 0.25rem; border: 1px solid #d1d5db; border-radius: 0.375rem; focus: outline-none; focus: ring-2; focus: ring-blue-500; font-size: 0.875rem;" value="蓝字">
                </div>
                
                <!-- 末尾文字设置 -->
                <div style="margin-bottom: 1rem;">
                    <h3 style="font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.5rem;">末尾文字设置</h3>
                    
                    <div style="display: flex; gap: 0.5rem;">
                        <!-- 末尾文字颜色 -->
                        <div style="flex: 1;">
                            <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">颜色</label>
                            <div style="display: flex; align-items: center;">
                                <input type="color" id="endTextColor" style="width: 100%; height: 2rem; cursor: pointer;" value="#1f2937">
                                <span class="color-preview" style="margin-left: 0.5rem; background-color: #1f2937;"></span>
                            </div>
                        </div>
                        
                        <!-- 末尾文字字体 -->
                        <div style="flex: 1;">
                            <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">字体</label>
                            <select id="endFontFamily" style="width: 100%; padding: 0.25rem; border: 1px solid #d1d5db; border-radius: 0.375rem; focus: outline-none; focus: ring-2; focus: ring-blue-500; font-size: 0.875rem;">
                                <option value="Arial, sans-serif">默认字体</option>
                                <option value="Georgia, serif">Georgia</option>
                                <option value="'Times New Roman', serif">Times New Roman</option>
                                <option value="Courier New, monospace">Courier New</option>
                                <option value="Verdana, sans-serif">Verdana</option>
                                <option value="Tahoma, sans-serif">Tahoma</option>
                                <option value="'Microsoft YaHei', sans-serif">微软雅黑</option>
                                <option value="'SimSun', serif">宋体</option>
                                <option value="'SimHei', sans-serif">黑体</option>
                            </select>
                        </div>
                        
                        <!-- 末尾文字大小 -->
                        <div style="flex: 1;">
                            <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">大小</label>
                            <div class="slider-container">
                                <input type="range" id="endFontSizeSlider" min="80" max="150" value="100" style="flex-grow: 1; margin-right: 0.5rem; height: 1rem;">
                                <span class="slider-value" id="endFontSizeValue" style="width: 2.1875rem; text-align: right; font-size: 0.75rem;">100%</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 末尾文字加粗 -->
                    <div style="margin-top: 0.5rem;">
                        <label style="display: block; font-size: 0.75rem; font-weight: 500; color: #4b5563; margin-bottom: 0.25rem;">加粗</label>
                        <div style="display: flex; align-items: center; justify-content: space-between;">
                            <span style="font-size: 0.75rem; color: #6b7280;">否</span>
                            <label style="relative; display: inline-flex; align-items: center; cursor: pointer;">
                                <input type="checkbox" id="endFontBold" style="sr-only; peer">
                                <div style="width: 2.5rem; height: 1.25rem; background-color: #e5e7eb; peer-focus: outline-none; peer-focus: ring-4; peer-focus: ring-blue-300; border-radius: 9999px; peer; peer-checked:after: translate-x-full; peer-checked:after: border-white; after: content-['']; after: position-absolute; after: top-[2px]; after: left-[2px]; after: background-color: #ffffff; after: border-gray-300; after: border; after: rounded-full; after: height: 1rem; after: width: 1rem; after: transition-all; peer-checked: background-color: #2563eb;"></div>
                            </label>
                            <span style="font-size: 0.75rem; color: #6b7280;">是</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧预览区 -->
            <div style="width: 100%; @media (min-width: 1024px) { width: 66.666%; } display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; background-color: #ffffff; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); position: relative;">
                <h2 style="font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; align-self: flex-start;">预览效果</h2>
                
                <!-- 预览容器 -->
                <div id="previewContainer" style="width: 100%; height: 16rem; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to bottom right, #f9fafb, #f3f4f6); border-radius: 0.5rem; margin-bottom: 1rem; position: relative; box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);">
                    <!-- 提示框容器 -->
                    <div id="alertBox" class="alert-box" style="background-color: #FFDC5E; transform: scale(1);">
                        <!-- 花朵图标 -->
                        <div id="alertIcon" style="margin-right: 0.75rem; color: #1f2937; position: relative; transform: rotate(12deg);">
                            <i class="fa fa-leaf" style="font-size: 1.25rem;"></i>
                        </div>
                        
                        <!-- 文本内容 -->
                        <div id="alertContent" style="color: #1f2937; font-size: 0.875rem;">
                            点击上方
                            <span id="alertLink" style="color: #0066CC; font-weight: 500; text-decoration: underline; cursor: pointer;">蓝字</span>
                            关注我们
                        </div>
                    </div>
                </div>
                
                <!-- 操作提示 -->
                <div style="text-align: center; color: #6b7280; font-size: 0.75rem;">
                    <p><i class="fa fa-info-circle" style="margin-right: 0.25rem;"></i> 提示：点击预览区的提示框可以拖动调整位置</p>
                </div>
                
                <!-- 固定在右侧的操作按钮 -->
                <div style="position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.75rem; z-index: 10;">
                    <button id="resetBtn" class="action-btn" style="width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); background-color: #e5e7eb; color: #1f2937;" title="重置">
                        <i class="fa fa-refresh"></i>
                    </button>
                    <button id="exportBtn" class="action-btn" style="width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); background-color: #0066CC; color: #ffffff;" title="导出图片">
                        <i class="fa fa-download"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 加载中遮罩 -->
    <div id="loadingOverlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease;">
        <div style="width: 3.125rem; height: 3.125rem; border: 0.3125rem solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite;"></div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" style="position: fixed; bottom: 1.25rem; right: 1.25rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); transform: translateY(6.25rem); opacity: 0; transition: all 0.3s ease; z-index: 1000; display: flex; align-items: center;">
        <div id="notificationIcon" style="margin-right: 0.5rem; font-size: 1.125rem;">
            <i class="fa fa-check-circle"></i>
        </div>
        <div id="notificationMessage">操作成功</div>
    </div>

    <script>
        let currentConfig = {
            bgColor: '#FFDC5E',
            textColor: '#1f2937',
            linkColor: '#0066CC',
            size: 100,
            radius: 50,
            shadow: true,
            icon: 'leaf',
            text: '点击上方蓝字关注我们',
            linkText: '蓝字',
            endText: '我们',
            endTextColor: '#1f2937',
            endFontFamily: 'Arial, sans-serif',
            endFontBold: false,
            endFontSize: 100,
            position: { x: 0, y: 0 }
        };

        const presetConfigs = {
            default: {
                bgColor: '#FFDC5E',
                textColor: '#1f2937',
                linkColor: '#0066CC',
                size: 100,
                radius: 50,
                shadow: true,
                icon: 'leaf'
            },
            blue: {
                bgColor: '#E0F2FE',
                textColor: '#1e3a8a',
                linkColor: '#1d4ed8',
                size: 100,
                radius: 40,
                shadow: true,
                icon: 'bell'
            },
            green: {
                bgColor: '#DCFCE7',
                textColor: '#166534',
                linkColor: '#22c55e',
                size: 100,
                radius: 30,
                shadow: true,
                icon: 'star'
            },
            pink: {
                bgColor: '#FCE7F3',
                textColor: '#831843',
                linkColor: '#db2777',
                size: 100,
                radius: 50,
                shadow: true,
                icon: 'heart'
            },
            dark: {
                bgColor: '#1f2937',
                textColor: '#f3f4f6',
                linkColor: '#60a5fa',
                size: 100,
                radius: 20,
                shadow: true,
                icon: 'gift'
            }
        };

        const alertBox = document.getElementById('alertBox');
        const alertIcon = document.getElementById('alertIcon');
        const alertContent = document.getElementById('alertContent');
        const alertLink = document.getElementById('alertLink');
        const previewContainer = document.getElementById('previewContainer');
        const loadingOverlay = document.getElementById('loadingOverlay');
        const notification = document.getElementById('notification');
        const notificationIcon = document.getElementById('notificationIcon');
        const notificationMessage = document.getElementById('notificationMessage');

        function init() {
            updateUI();
            addEventListeners();
        }

        function updateUI() {
            document.getElementById('bgColor').value = currentConfig.bgColor;
            document.getElementById('textColor').value = currentConfig.textColor;
            document.getElementById('linkColor').value = currentConfig.linkColor;
            
            document.querySelectorAll('.color-preview')[0].style.backgroundColor = currentConfig.bgColor;
            document.querySelectorAll('.color-preview')[1].style.backgroundColor = currentConfig.textColor;
            document.querySelectorAll('.color-preview')[2].style.backgroundColor = currentConfig.linkColor;
            
            document.getElementById('sizeSlider').value = currentConfig.size;
            document.getElementById('sizeValue').textContent = `${currentConfig.size}%`;
            
            document.getElementById('radiusSlider').value = currentConfig.radius;
            document.getElementById('radiusValue').textContent = `${currentConfig.radius}%`;
            
            document.getElementById('shadowToggle').checked = currentConfig.shadow;
            
            document.querySelectorAll('.icon-option').forEach(option => {
                if (option.dataset.icon === currentConfig.icon) {
                    option.classList.add('selected');
                } else {
                    option.classList.remove('selected');
                }
            });
            
            document.getElementById('alertText').value = currentConfig.text;
            document.getElementById('linkText').value = currentConfig.linkText;
            
            document.getElementById('endTextColor').value = currentConfig.endTextColor;
            document.querySelectorAll('.color-preview')[3].style.backgroundColor = currentConfig.endTextColor;
            document.getElementById('endFontFamily').value = currentConfig.endFontFamily;
            document.getElementById('endFontBold').checked = currentConfig.endFontBold;
            document.getElementById('endFontSizeSlider').value = currentConfig.endFontSize;
            document.getElementById('endFontSizeValue').textContent = `${currentConfig.endFontSize}%`;
            
            updateAlertBoxStyle();
            
            document.querySelectorAll('.preset-option').forEach(option => {
                if (option.dataset.preset === 'default') {
                    option.classList.add('selected');
                } else {
                    option.classList.remove('selected');
                }
            });
        }

        function updateAlertBoxStyle() {
            alertBox.style.backgroundColor = currentConfig.bgColor;
            alertContent.style.color = currentConfig.textColor;
            alertLink.style.color = currentConfig.linkColor;
            
            alertBox.style.transform = `scale(${currentConfig.size / 100})`;
            
            const radius = currentConfig.radius === 50 ? '9999px' : `${currentConfig.radius}%`;
            alertBox.style.borderRadius = radius;
            
            alertBox.style.boxShadow = currentConfig.shadow ? '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' : 'none';
            
            const iconElement = alertIcon.querySelector('i');
            iconElement.className = `fa fa-${currentConfig.icon} text-xl`;
            
            // 提取末尾文字
            const lastTwoChars = currentConfig.text.slice(-2);
            currentConfig.endText = lastTwoChars;
            
            const textParts = currentConfig.text.split(currentConfig.linkText);
            if (textParts.length === 2) {
                const secondPart = textParts[1];
                if (secondPart.endsWith(currentConfig.endText)) {
                    const beforeEnd = secondPart.substring(0, secondPart.length - currentConfig.endText.length);
                    
                    alertContent.innerHTML = `${textParts[0]}<span id="alertLink" style="color: ${currentConfig.linkColor}; font-weight: 500; text-decoration: underline; cursor: pointer;">${currentConfig.linkText}</span>${beforeEnd}<span id="endText" style="color: ${currentConfig.endTextColor}; font-family: ${currentConfig.endFontFamily}; font-weight: ${currentConfig.endFontBold ? 'bold' : 'normal'}; font-size: ${currentConfig.endFontSize}%;">${currentConfig.endText}</span>`;
                } else {
                    alertContent.innerHTML = `${textParts[0]}<span id="alertLink" style="color: ${currentConfig.linkColor}; font-weight: 500; text-decoration: underline; cursor: pointer;">${currentConfig.linkText}</span>${secondPart}`;
                }
                document.getElementById('alertLink').addEventListener('click', () => {
                    showNotification('success', '链接被点击');
                });
            } else {
                alertContent.textContent = currentConfig.text;
                alertLink.textContent = currentConfig.linkText;
            }
            
            alertBox.style.transform = `scale(${currentConfig.size / 100}) translate(${currentConfig.position.x}px, ${currentConfig.position.y}px)`;
        }

        function addEventListeners() {
            document.getElementById('bgColor').addEventListener('input', (e) => {
                currentConfig.bgColor = e.target.value;
                document.querySelectorAll('.color-preview')[0].style.backgroundColor = currentConfig.bgColor;
                updateAlertBoxStyle();
            });
            
            document.getElementById('textColor').addEventListener('input', (e) => {
                currentConfig.textColor = e.target.value;
                document.querySelectorAll('.color-preview')[1].style.backgroundColor = currentConfig.textColor;
                updateAlertBoxStyle();
            });
            
            document.getElementById('linkColor').addEventListener('input', (e) => {
                currentConfig.linkColor = e.target.value;
                document.querySelectorAll('.color-preview')[2].style.backgroundColor = currentConfig.linkColor;
                updateAlertBoxStyle();
            });
            
            document.getElementById('sizeSlider').addEventListener('input', (e) => {
                currentConfig.size = parseInt(e.target.value);
                document.getElementById('sizeValue').textContent = `${currentConfig.size}%`;
                updateAlertBoxStyle();
            });
            
            document.getElementById('radiusSlider').addEventListener('input', (e) => {
                currentConfig.radius = parseInt(e.target.value);
                document.getElementById('radiusValue').textContent = `${currentConfig.radius}%`;
                updateAlertBoxStyle();
            });
            
            document.getElementById('shadowToggle').addEventListener('change', (e) => {
                currentConfig.shadow = e.target.checked;
                updateAlertBoxStyle();
            });
            
            document.querySelectorAll('.icon-option').forEach(option => {
                option.addEventListener('click', () => {
                    currentConfig.icon = option.dataset.icon;
                    document.querySelectorAll('.icon-option').forEach(opt => {
                        opt.classList.remove('selected');
                    });
                    option.classList.add('selected');
                    updateAlertBoxStyle();
                });
            });
            
            document.getElementById('alertText').addEventListener('input', (e) => {
                currentConfig.text = e.target.value;
                updateAlertBoxStyle();
            });
            
            document.getElementById('linkText').addEventListener('input', (e) => {
                currentConfig.linkText = e.target.value;
                updateAlertBoxStyle();
            });
            
            document.getElementById('endTextColor').addEventListener('input', (e) => {
                currentConfig.endTextColor = e.target.value;
                document.querySelectorAll('.color-preview')[3].style.backgroundColor = currentConfig.endTextColor;
                updateAlertBoxStyle();
            });
            
            document.getElementById('endFontFamily').addEventListener('change', (e) => {
                currentConfig.endFontFamily = e.target.value;
                updateAlertBoxStyle();
            });
            
            document.getElementById('endFontBold').addEventListener('change', (e) => {
                currentConfig.endFontBold = e.target.checked;
                updateAlertBoxStyle();
            });
            
            document.getElementById('endFontSizeSlider').addEventListener('input', (e) => {
                currentConfig.endFontSize = parseInt(e.target.value);
                document.getElementById('endFontSizeValue').textContent = `${currentConfig.endFontSize}%`;
                updateAlertBoxStyle();
            });
            
            document.querySelectorAll('.preset-option').forEach(option => {
                option.addEventListener('click', () => {
                    const preset = option.dataset.preset;
                    if (presetConfigs[preset]) {
                        const text = currentConfig.text;
                        const linkText = currentConfig.linkText;
                        const endText = currentConfig.endText;
                        const endTextColor = currentConfig.endTextColor;
                        const endFontFamily = currentConfig.endFontFamily;
                        const endFontBold = currentConfig.endFontBold;
                        const endFontSize = currentConfig.endFontSize;
                        const position = currentConfig.position;
                        
                        currentConfig = { ...presetConfigs[preset], text, linkText, endText, endTextColor, endFontFamily, endFontBold, endFontSize, position };
                        
                        updateUI();
                        
                        document.querySelectorAll('.preset-option').forEach(opt => {
                            opt.classList.remove('selected');
                        });
                        option.classList.add('selected');
                    }
                });
            });
            
            document.getElementById('resetBtn').addEventListener('click', () => {
                const position = currentConfig.position;
                
                currentConfig = { 
                    ...presetConfigs.default, 
                    text: '点击上方蓝字关注我们', 
                    linkText: '蓝字', 
                    endText: '我们',
                    endTextColor: '#1f2937',
                    endFontFamily: 'Arial, sans-serif',
                    endFontBold: false,
                    endFontSize: 100,
                    position 
                };
                
                updateUI();
                
                showNotification('success', '已重置为默认样式');
            });
            
            document.getElementById('exportBtn').addEventListener('click', exportAsImage);
            
            document.getElementById('alertLink').addEventListener('click', () => {
                showNotification('success', '链接被点击');
            });
            
            makeAlertBoxDraggable();
        }

        function makeAlertBoxDraggable() {
            let isDragging = false;
            let offsetX, offsetY;
            
            alertBox.addEventListener('mousedown', startDrag);
            alertBox.addEventListener('touchstart', startDrag, { passive: false });
            
            function startDrag(e) {
                e.preventDefault();
                
                if (e.type === 'mousedown') {
                    isDragging = true;
                    offsetX = e.clientX - alertBox.getBoundingClientRect().left;
                    offsetY = e.clientY - alertBox.getBoundingClientRect().top;
                    
                    document.addEventListener('mousemove', drag);
                    document.addEventListener('mouseup', stopDrag);
                } else if (e.type === 'touchstart') {
                    isDragging = true;
                    const touch = e.touches[0];
                    offsetX = touch.clientX - alertBox.getBoundingClientRect().left;
                    offsetY = touch.clientY - alertBox.getBoundingClientRect().top;
                    
                    document.addEventListener('touchmove', drag, { passive: false });
                    document.addEventListener('touchend', stopDrag);
                }
            }
            
            function drag(e) {
                if (!isDragging) return;
                e.preventDefault();
                
                const containerRect = previewContainer.getBoundingClientRect();
                const alertBoxRect = alertBox.getBoundingClientRect();
                
                let clientX, clientY;
                if (e.type === 'mousemove') {
                    clientX = e.clientX;
                    clientY = e.clientY;
                } else if (e.type === 'touchmove') {
                    const touch = e.touches[0];
                    clientX = touch.clientX;
                    clientY = touch.clientY;
                }
                
                let newLeft = clientX - containerRect.left - offsetX;
                let newTop = clientY - containerRect.top - offsetY;
                
                const maxLeft = containerRect.width - alertBoxRect.width;
                const maxTop = containerRect.height - alertBoxRect.height;
                
                newLeft = Math.max(0, Math.min(newLeft, maxLeft));
                newTop = Math.max(0, Math.min(newTop, maxTop));
                
                currentConfig.position = { 
                    x: newLeft - (containerRect.width - alertBoxRect.width) / 2, 
                    y: newTop - (containerRect.height - alertBoxRect.height) / 2 
                };
                
                updateAlertBoxStyle();
            }
            
            function stopDrag() {
                isDragging = false;
                document.removeEventListener('mousemove', drag);
                document.removeEventListener('mouseup', stopDrag);
                document.removeEventListener('touchmove', drag);
                document.removeEventListener('touchend', stopDrag);
            }
        }

        function exportAsImage() {
            loadingOverlay.classList.add('active');
            
            const tempContainer = document.createElement('div');
            tempContainer.style.position = 'absolute';
            tempContainer.style.left = '-9999px';
            tempContainer.style.top = '-9999px';
            tempContainer.style.backgroundColor = 'transparent';
            
            const alertBoxClone = alertBox.cloneNode(true);
            alertBoxClone.style.transform = `scale(${currentConfig.size / 100})`;
            alertBoxClone.style.cursor = 'default';
            
            tempContainer.appendChild(alertBoxClone);
            document.body.appendChild(tempContainer);
            
            html2canvas(alertBoxClone, {
                backgroundColor: null,
                scale: 2
            }).then(canvas => {
                const link = document.createElement('a');
                link.download = '关注提示框.png';
                link.href = canvas.toDataURL('image/png');
                
                link.click();
                
                document.body.removeChild(tempContainer);
                
                loadingOverlay.classList.remove('active');
                
                showNotification('success', '图片导出成功');
            }).catch(error => {
                document.body.removeChild(tempContainer);
                
                loadingOverlay.classList.remove('active');
                
                showNotification('error', '图片导出失败');
                console.error('导出图片失败:', error);
            });
        }

        function showNotification(type, message) {
            notification.className = 'notification';
            notification.classList.add(type);
            
            if (type === 'success') {
                notificationIcon.innerHTML = '<i class="fa fa-check-circle"></i>';
            } else if (type === 'error') {
                notificationIcon.innerHTML = '<i class="fa fa-exclamation-circle"></i>';
            } else if (type === 'info') {
                notificationIcon.innerHTML = '<i class="fa fa-info-circle"></i>';
            }
            
            notificationMessage.textContent = message;
            
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 3000);
        }

        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>